<!-- 首页 -->
<template>
  <div class="I_main">
    <!-- 锚点定位 -->
    <el-card :body-style="{ padding: '0px',width:'100%' }" class="maoposition">
      <div>
        <a @click="changeMaoposition(index)" v-for="(item,index) in maomenuList" :key="index"
          :style="index!==2?'border-bottom:1px solid #E6E6E6':''" :class="currntmao===index?'mao_item2':'mao_item'"
          :href="item.maoid">
          {{item.name}}
        </a>
      </div>
    </el-card>

    <!-- 数据统计 -->
    <el-card class="sysnatic" :body-style="{ padding: '0px',width:'100%' }">
      <div class="card_body scroll-content" @scroll="onScroll">
        <div class="ditu" id="ditu">
          <div class="titleBox">
            <div class="title title1">实时稽核地图</div>
            <div class="subtxt">
              已识别业务流程稽核点<span class="num_dark3_num" style="font-size:18px">{{'128'}}</span>个,
              已实现实时稽核场景个数<span class="num_dark3_num" style="font-size:18px">{{'73'}}</span>个,
              覆盖率<span class="num_dark3_num" style="font-size:18px">{{'57'}}</span>%
              <!-- <div class="section_3 flex-row"> -->
                
                <span class="text_12" @click="downloadExcel()">
                  <img
                  class="image_37"
                  referrerpolicy="no-referrer"
                  src="https://lanhu.oss-cn-beijing.aliyuncs.com/f8732e407ef30dc95f39c9e7a0377550"
                />
                  已覆盖详情</span>
              <!-- </div> -->
            </div>
            <img class="hd_line" :src="img.hdLine" />
          </div>
          
          <div class="mon_four_box" style="margin-top:28px">
            <el-card v-for="(item,index) of dituDataList" :key="index" :body-style="{ padding: '0px' }">
              <!-- 判断不同数据赋予不同样式 -->
              <div v-if="!item.child" class="mon_item">
                <el-tooltip effect="dark" content="item.text" >
                  <div class="tip1" slot="content" >{{item.text}}</div>
                  <img class="s_monitem_icon" :src="img.problemIcon" />
                </el-tooltip>
                <div  style="flex-direction: column;display: flex;align-items: center;"
                 
                  @click="$router.push({name:item.url})"
                  >
                  <div :class="'mon_item_img mon_item_img_src'+index "></div>
                  <div class="shoua" style="margin-top:15px;display: flex;align-items: center;">
                    <span class="subtxt" >{{item.subtitle1}}</span>
                    <span class="subtxt_red" >{{item.subtitle2}}</span>
                  </div>
                </div>
                <!-- <div style="margin-top: 21px;" class="num_dark3"> 已覆盖<span
                    class="num_dark3_num">{{item.numbers}}</span>个{{item.unit}}</div> -->

                    <div v-if="index==2" style="margin-top: 21px;" class="num_dark3">已识别<span
                    class="num_dark3_num">{{item.numbers1}}</span>个{{item.unit}},已覆盖
                    <span class="num_dark3_num">{{item.numbers}}</span>个</div>
                    <div v-if="index==0" style="margin-top: 21px;" class="num_dark3">已覆盖<span
                    class="num_dark3_num">{{item.numbers1}}</span>个主要业务流程</div>
                <div style="margin-top: 21px;" class="subtxt num_dark2">{{item.title}}</div>
              </div>
              <div v-else class="mon_longitem">
                <el-tooltip effect="dark" content="item.text">
                  <div class="tip1" slot="content">{{item.text}}</div>
                  <img class="s_monitem_icon" :src="img.problemIcon" />
                </el-tooltip>
                <div class="mon_bigbox">
                  <div v-for="(item2,index2) of item.child" :key="index2" class="mon_item2">
                    <div style="flex-direction: column;display: flex;align-items: center;cursor: pointer;"
                     
                      @click="$router.push({name:item2.url})"
                      
                      >
                      <div :class="'mon_item_img mon_item_img_src'+index+index2 "></div>

                      <div style="margin-top:15px;display: flex;align-items: center;">
                        <span class="subtxt">{{item2.subtitle1}}</span>
                        <span class="subtxt_red">{{item2.subtitle2}}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="margin-top: 21px;" class="num_dark3">已识别<span
                    class="num_dark3_num">{{item.numbers1}}</span>个{{item.unit}},已覆盖
                    <span class="num_dark3_num">{{item.numbers}}</span>个</div>
                <div style="margin-top: 21px;" class="subtxt num_dark2">
                  {{item.title}}
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <!-- ui图调整代码暂时隐藏 -->
        <!-- <div class="sysnatic_c">
          <div class="s_item" v-for="(item,index) in dataList" :key="index">
            <div class="s_item_c">
              <div v-if="index!==0" class="c_line"></div>
              <div class="s_item_text">
                <img class="s_item_img" :src="item.img" />
                <div class="s_line1 subtxt"><span class="s_num">{{item.num}}</span>{{item.unit}}</div>
                <div class="s_line2 subtxt">{{item.discribe}}</div>
              </div>
            </div>
            <el-tooltip effect="dark" :content="item.text" placement="left">
              <div class="tip1" slot="content">{{item.text}}</div>
              <img class="s_item_icon" :src="img.problemIcon" />
            </el-tooltip>
          </div>
        </div> -->
        <!-- 实时稽核效果 -->
        <div class="titleBox" id="xiaoguo">
          <div class="title title1">实时稽核效果</div>
          <img class="hd_line" :src="img.hdLine" />
        </div>
        <div class="mo_bg">
          <div class="moneyBox">
            <span class="subtxt" style="line-height: 25px;">近一个月拦截总额 </span>
            <span class="mainColor" style="font-size:36px;font-weight: 700;margin: 0 10px;">{{this.sumMoney}}</span>
            <span class="subtxt" style="line-height: 25px;"> 元</span>
          </div>

          <!-- <div class="subtxt" style="line-height: 40px;">进一个月拦截总额<span class="mainColor" style="font-size:36px;font-weight: 700;">124,876</span>元</div> -->
        </div>
        <div class="mon_four_box" style="cursor:default;">
          <el-card v-for="(item,index) of interceptList" :key="index" :body-style="{ padding: '0px' }">
            <div class="mon_item">
              <el-tooltip effect="dark" :content="item.text" placement="left">
                <div class="tip1" slot="content">{{item.text}}</div>
                <img class="s_monitem_icon" :src="img.problemIcon" />
              </el-tooltip>
              <img class="mon_item_img" :src="item.img" />
              <div style="margin-top:27px;display: flex;align-items: center;">
                <span class="num_dark">{{interceptListData[item.id]||0}} </span>
                <span class="subtxt"> 元</span>
              </div>
              <div style="margin-top: 13.5px;cursor:default;" class="subtxt">{{item.discribe}}</div>
            </div>
          </el-card>
        </div>
        <!-- 进一个月调用检验量统计 -->
        <div class="clickBox">
          <div class="clickboxCon">
            <el-card v-for="(item,index) in clickData" :key="index" :body-style="{ padding: '0px'}">
              <div class="clickBox_item">
                <div class="clickBox_item_imgbox">
                  <img class="click_img" :src="item.img" />
                </div>
                <div class="clickBox_txtbox">
                  <span class="subtxt">{{item.txt}}</span>
                  <span v-if="index==0 || index ==1"
                    :class="item.times.substr(0,1)==='+'?'mainColor click_num':'blackColor click_num'">{{item.num}}</span>

                    <span v-if="index==2"
                    :class="item.times.substr(0,1)==='+'?'mainColor click_num':'blackColor click_num'">{{item.num}}%</span>

                    
                  <div class="jtBox">
                    <span :class="item.type == '0'?'mainColor':'blackColor'">{{item.times}}</span>
                    <img :src="item.type == '0' ?img.jtUp:img.jtDown" class="click_jt">
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
        <!-- 图表展示 -->
        <div style="width: 1080px;">
          <!-- 近一个月调用量 -->
          <div style="margin-top: 40px;">
            <div class="L_title">
              <div class="L_title_sq"></div>
              <div class="L_title_txt">近一个月调用量</div>
              <el-tooltip effect="dark" content="item.text" placement="right">
                <div class="tip1" slot="content">{{'查询日的前30天实时稽核场景的调用情况'}}</div>
                <img :src="img.problemIcon" style="width: 18px;height: 18px;margin-left: 5px;" alt="">
              </el-tooltip>
            </div>
            <!-- 数据图表 -->
            <div style="width:1080px;height: 500px;" id="diaoyongEC"></div>
          </div>
          <!-- 近一个月校验情况 -->
          <div>
            <div class="L_title">
              <div class="L_title_sq"></div>
              <div class="L_title_txt">近一个月校验情况</div>
              <el-tooltip effect="dark" content="item.text" placement="right">
                <div class="tip1" slot="content">{{'查询日的前30天实时稽核场景的拦截情况'}}</div>
                <img :src="img.problemIcon" style="width: 18px;height: 18px;margin-left: 5px;" alt="">
              </el-tooltip>
            </div>
            <!-- 数据图表 -->
            <div style="width:1080px;height: 500px;" id="jiaoyanEC"></div>
          </div>
          <!-- 月度排行榜 -->
          <div>
            <div class="L_title">
              <div class="L_title_sq"></div>
              <div class="L_title_txt">月度排行榜</div>
            </div>
            <div class="nox_box">
              <el-card v-for="(item,index) in noDataList" :key="index" :body-style="{ padding: '0px' }">
                <div class="no_item">
                  <div class="no_item_tbox no_item_bkcolor0"
                    >
                    <el-tooltip effect="dark" content="item.text">
                      <div class="tip1" slot="content">{{item.text}}</div>
                      <img :src="img.problemIcon2" class="s_noitem_icon" alt="">
                    </el-tooltip>
                    <div class="no_item_t">{{item.title}}</div>
                  </div>
                  <img :src="img.hjt" class="hjt">
                  <div class="no_item_cbox">
                    <div v-for="(item2,index2) in item.child" :key="index2" class="no_item_timebox">
                      <div class="no_item_index">{{index2+1}}</div>
                      <div class="no_item_databox">
                        <div class="no_item_data">
                          <span class="no_item_data_t">{{item2.name}}</span>
                          <span class="subtxt" v-if="item2.type==0">{{item2.dycs}}次</span>
                          <span class="subtxt" v-if="item2.type==2">{{item2.width}}%</span>
                          <span class="subtxt" v-if="item2.type==1">{{item2.dycs}}次</span>
                        </div>
                        <div class="no_item_jindutiao">
                          <div  
                          class="no_item_jdtcor0"
                          :style="{width:item2.widthStr}"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
        
        <div class="other" id="qita">
          <div class="titleBox">
            <div class="title title1">其他</div>
            <img class="hd_line" :src="img.hdLine" />
          </div>
          <div class="other_c">
            <div class="s_item2" v-for="(item,index) in otherDatalist" :key="index">
              <div class="s_item_c">
                <div v-if="index!==0" class="c_line"></div>
                <div class="s_item_text">
                  <!-- <img class="s_item_img" :src="item.img" /> pushRoure-->
                  <div :class="'s_item_img s_item_img'+index "></div>
                  <!-- <div class="s_line2 subtxt" @click="$router.push({name:item.route})">{{item.text}}</div> -->
                  <div style="cursor: pointer;" class="s_line2 subtxt" @click="pushRoure({name:item.route})">{{item.text}}</div>
                </div>
              </div>
              <el-tooltip effect="dark" :content="item.subtext" placement="left">
                <div class="tip1" slot="content">{{item.subtext}}</div>
                <img class="s_item_icon" :src="img.problemIcon" />
              </el-tooltip>
            </div>
          </div>

        </div>
        <!-- <div class="foot">
          <div>北京市海淀区东冉北街9号中国铁塔产业园 邮箱：news@chinatowercom.cn</div>
          <div>Copyright©2018中国铁塔股份有限公司 版权所有</div>
          <div>京ICP备14039488号</div>
        </div> -->
      </div>
    </el-card>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        currntmao: 0,
        sumMoney: '',
        maomenuList: [
          { maoid: '#ditu', name: '实时稽核地图' },
          { maoid: '#xiaoguo', name: '实时稽核效果' },
          { maoid: '#qita', name: '其他' }
        ],
        dataList: [
          { num: 58, unit: '个', discribe: '实时场景个数', text: '累计发布的实时稽核及查询、加速场景', img: require('@/assets/img/sscj.png') },
          { num: 6, unit: '个', discribe: '已覆盖主要业务流程', text: '已覆盖营收、工程、资产、成本、支付、三集中业务流程', img: require('@/assets/img/sscj.png') },
          { num: 2, unit: '个', discribe: '已覆盖详细流程 ', text: '已覆盖支付和营收两个详细流程', img: require('@/assets/img/sscj.png') },
          { num: 1, unit: '个', discribe: '已覆盖消息实体', text: '已完成站址业务的覆盖', img: require('@/assets/img/sscj.png') },
        ],
        interceptList: [
          { money: '56,876', id: '3.3', unit: '元', discribe: '近一个月拦截不合规业主支付金额', text: '拦截业主支付信息不合规订单涉及的合同金额', img: require('@/assets/img/zfje.png') },
          // { money: '56,876', id: '2.26', unit: '元', discribe: '近一个月拦截不合规供应商报账涉及合同金额', text: '拦截不合规供应商报账订单涉及的合同金额', img: require('@/assets/img/gysbz.png') },
          { money: '56,876', id: '3.4', unit: '元', discribe: '近一个月拦截不合规起租订单金额', text: '拦截关联站址资源不合规起租订单涉及的金额', img: require('@/assets/img/qzdd.png') },
          { money: '56,876', id: '4.1', unit: '元', discribe: '近一个月拦截不应起租订单金额', text: '拦截站址状态不应起租订单涉及的金额', img: require('@/assets/img/bqzdd.png') },

        ],
        interceptListData: {},
        clickData: [
          { img: require('@/assets/img/dyl.png'), txt: '近一个月校验量', num: '124,157,262', times: '+2546次',type:'0' },
          { img: require('@/assets/img/yyl.png'), txt: '近一个月调用量', num: '124,157', times: '-546次',type:'0'},
          { img: require('@/assets/img/yylv.png'), txt: '近一个月校验率', num: '56%', times: '-30%',type:'1' },

        ],
        noDataList: [
          {
            title: '月热门调用量-系统TOP5',
            text: '查询日的前30天，各系统调用内存数据库情况',
            child: [
              // { name: 'CRM系统', dycs: '500次' ,widthStr:'80%'},
              // { name: '商合交易系统', dycs: '460次',widthStr:'50%' },
              // { name: '财务系统', dycs: '430次',widthStr:'100%' },
              // { name: 'PMS系统', dycs: '210次' ,widthStr:'60%'},
              // { name: 'CRM系统', dycs: '220次' ,widthStr:'10%'}
            ]
          },
          {
            title: '月热门调用量- 场景TOP5',
            text: '查询日的前30天，调用次数最多的五个服务',
            child: [
              // { name: '沉淀固化数据实时校验', dycs: '500次' },
              // { name: '实时校验服务查询门户', dycs: '480次' },
              // { name: '订单起租不及时风险校验', dycs: '470次' },
              // { name: '工程物资一致性检查', dycs: '400次' },
              // { name: '站址周边场租水平提示', dycs: '260次' }
            ]
          },
          {
            title: '月度场景拦截率 TOP5',
            text: '查询日的前30天，拦截率排名',
            child: [
              // { name: '沉淀固化数据实时校验 ', dycs: '90%' },
              // { name: '实时校验服务查询门户', dycs: '87%' },
              // { name: '订单起租不及时风险校验', dycs: '80%' },
              // { name: '工程物资一致性检查', dycs: '60%' },
              // { name: '站址周边场租水平提示', dycs: '32%' }
            ]
          }
        ],
        DiaoyongTop5: [],
        dituDataList: [
          { unit: '主要业务流程',url:'biz-navpage', numbers:6, numbers1:6,text: '展示业务的实时稽核场景及拦截情况', title: 'L1主业务流程', subtitle1: '实时稽核地图-', subtitle2: '总览', img: require('@/assets/img/l1-zl.png'), clickImg: require('@/assets/img/l1-zl_p.png'), nextPage: '' },
          {
            unit: '详细业务流程', numbers:2, numbers1:6,title: 'L2详细的业务流程', text: '展示营收线、支付线实时稽核场景及拦截情况', child: [
              { subtitle1: '实时稽核地图-',url:'biz-revenueto', subtitle2: '营收', img: require('@/assets/img/l1-zl.png'), clickImg: require('@/assets/img/l1-zl_p.png'), nextPage: '' },
              { subtitle1: '实时稽核地图-',url:'biz-pbpay', subtitle2: '支付', img: require('@/assets/img/l1-zl.png'), clickImg: require('@/assets/img/l1-zl_p.png'), nextPage: '' }
            ]
          },
          { unit: '业务实体', numbers:1, numbers1:5,url:'biz-mapthree',title: 'L3业务实体', text: '以站址为核心，展示省份站址状态等相关业务信息', subtitle1: '实时稽核地图-', subtitle2: '站址', img: require('@/assets/img/l1-zl.png'), clickImg: require('@/assets/img/l1-zl_p.png'), nextPage: '' }
        ],
        otherDatalist: [
          { subtext: '整合各业务系统中的各类审核信息，便于操作', img: require('@/assets/img/kfpt.png'), clickImg: require('@/assets/img/kfpt.png'), text: '集中审核综合查询开放平台' ,route:'biz-oa'},
          { subtext: '将已实现场景内容进行集中展示', img: require('@/assets/img/cxmh.png'), clickImg: require('@/assets/img/cxmh.png'), text: '实时校验服务查询门户',route:'biz-psr' },
          { subtext: '对场景的调用日志结果提供图形化的查询界面', img: require('@/assets/img/rzcx.png'), clickImg: require('@/assets/img/rzcx.png'), text: '调用日志查询' ,route:'biz-audit'}
        ],
        // 总量统计
        resultData: [
          { name: '近一个月校验量', num: '124,157,262', toshift: '+2,546 次' },
          { name: '近一个月调用量', num: '124,157', toshift: '-546 次' },
          { name: '近一个月校验率', num: '56%', toshift: '-30%' }
        ],
        img: {
          hjt: require('@/assets/img/hjt.png'),
          dtBg: require('@/assets/img/dt-bg.png'),
          jtUp: require('@/assets/img/jt-up.png'),
          jtDown: require('@/assets/img/jt-down.png'),
          problemIcon: require('@/assets/img/problemIcon.png'),
          problemIcon2: require('@/assets/img/problemIcon2.png'),
          hdLine: require('@/assets/img/hd-line.png'),
          zfje: require('@/assets/img/zfje.png'),
          iconHelp: require('@/assets/img/ICO-help.png'),
          title1: require('@/assets/img/title-1.png'),
          title2: require('@/assets/img/title-2.png'),
          title3: require('@/assets/img/title-3.png'),
          zonglan: require('@/assets/img/zonglan.png'),
          yingshou: require('@/assets/img/yingshou.png'),
          zhifu: require('@/assets/img/zhifu.png'),
          zhanshi: require('@/assets/img/zhanshi.png'),
          other1: require('@/assets/img/other1.png'),
          other2: require('@/assets/img/other2.png'),
          other3: require('@/assets/img/other3.png'),
          down: require('@/assets/img/down.png'),
          up: require('@/assets/img/up.png'),
          r_t1: require('@/assets/img/r-t1.png'),
          r_t2: require('@/assets/img/r-t2.png'),
          r_t3: require('@/assets/img/r-t3.png'),
        },
        diaoyongECoption: {
          tooltip: {},
          dataZoom: [
            {
              moveOnMouseMove: true,
              id: 'dataZoomX',
              type: 'inside',
              xAxisIndex: [0],
              start: 83,
              end: 100,
              zoomLock: true
            }
          ],
          xAxis: {
            name: '日期',
            axisLabel: {
              rotate: 50,
              color: '#999999',
              formatter: function (value) {
                return value.slice(5, 10);
              },
            },

            data: []
          },
          yAxis: {
            name: '次数',
            nameTextStyle: {
              color: '#999999'
            },
            axisLine: {
              show: false, // 不显示坐标轴线
            },
            axisLabel: {
              color: '#999999'
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              type: 'bar',
              barWidth: '50%',
              realtimeSort: true,
              // 数据
              data: [23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24,],
              // 柱形图样式
              itemStyle: {
                normal: {
                  barBorderRadius: [50, 50, 0, 0],
                  borderWidth: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: '#FFE8C3' },
                    { offset: 0, color: '#F26654' }
                  ]),
                  shadowColor: '#D18A90',
                  shadowBlur: 3,
                }
              }
            }

          ]
        },
        jiaoyanECoption: {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            },
          },
          dataZoom: [
            {
              moveOnMouseMove: true,
              id: 'dataZoomX',
              type: 'inside',
              xAxisIndex: [0],
              start: 83,
              end: 100,
              zoomLock: true
            }
          ],
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: ['次数', '百分比']
          },
          xAxis: {
            name: '日期',
            axisLabel: {
              rotate: 50,
              color: '#999999',
              formatter: function (value) {
                return value.slice(5, 10);
              }
            },
            data: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11',
              '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23',
              '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30']
          },
          yAxis: [
            {
              type: 'value',
              name: '次数',
              nameTextStyle: {
                color: '#999999'
              },
              axisLine: {
                show: false, // 不显示坐标轴线
              },
              axisLabel: {
                color: '#999999'
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                // formatter: '{value} ml'
              }
            },
            {
              type: 'value',
              name: '百分比',
              nameTextStyle: {
                color: '#999999'
              },
              axisLine: {
                show: false, // 不显示坐标轴线
              },
              axisLabel: {
                color: '#999999'
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  // 设置背景横线
                  color: "#0000000",
                },
              },
              axisLabel: {
                // formatter: '{value} °C'
              }
            }
          ],
          series: [
            {
              name: '次数',
              type: 'bar',
              barWidth: '50%',
              realtimeSort: true,
              // 数据
              data: [23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24,],
              // 柱形图样式
              itemStyle: {
                normal: {
                  barBorderRadius: [50, 50, 0, 0],
                  borderWidth: 1,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 1, color: '#FFE8C3' },
                    { offset: 0, color: '#F26654' }
                  ]),
                  shadowColor: '#D18A90',
                  shadowBlur: 3,
                }
              }
            },
            {
              name: '百分比',
              type: 'line',
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: '#737373',
                  lineStyle: {
                    color: '#737373',
                  }
                },

              },

              data: [23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 27, 28, 25, 23, 24,],

            }
          ]
        }
      };
    },

    components: {},

    computed: {},

    mounted() {
      // 数据获取
      this.getMouthLanjieMoney()
      this.getHalfyearClickAndIntercept()
      this.getLanjieMoney()
      this.getDiaoyongTop5()
      this.getLanjeTop5()
      this.gethotDiaoyongTop5()
      this.getMonthInterceptTotal()
      this.getMonthInterceptRatio()
    },

    methods: {

      downloadExcel(){
        let a = document.createElement("a"); //创建一个<a></a>标签
          a.href = "/2000004/static/yfgxq.xlsx"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
          a.download = "已覆盖详情.xlsx"; //设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
          a.style.display = "none"; // 障眼法藏起来a标签
          document.body.appendChild(a); // 将a标签追加到文档对象中
          a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
          a.remove(); // 一次性的，用完就删除a标签

      },

      pushRoure(route){
        let jsonObj = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes'));
        // console.log(jsonObj);
        var num = 0;
        jsonObj.forEach((item, i) => {
          if(item.name == route.name){
            num = 1;
          }
        });
        console.log(num);
        if(num == 1){
          return this.$router.push(route)
        }else{
          this.$message('您无该页面权限');
        }
        
      },
      // 滚动触发按钮高亮
      onScroll(e) {
        let scrollItems = document.querySelectorAll('.scroll-item')
        console.log(scrollItems.length,'666666666666')
        // for (let i = scrollItems.length - 1; i >= 0; i--) {
        //   // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        //   let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
        //   if (judge) {
        //     this.activeStep = i
        //     break
        //   }
        // }
      },
      // 锚点定位菜单切换
      changeMaoposition(index) {
        this.currntmao = index
      },
      // 渲染调用量
      showDiaoyong() {
        var chartDom = document.getElementById('diaoyongEC');
        var myChart = this.$echarts.init(chartDom);
        this.diaoyongECoption && myChart.setOption(this.diaoyongECoption);
      },
      // 渲染校验量
      showJiaoyan() {
        var chartDom = document.getElementById('jiaoyanEC');
        var myChart = this.$echarts.init(chartDom);
        console.log('>>>>>>>>>>>>>>>>>>>>>>>', this.$echarts.version)
        this.jiaoyanECoption && myChart.setOption(this.jiaoyanECoption);
      },
      //     页面内容对应接口：
      // ----半年内 每日调用总量、拦截率
      //   / main / haveAYear
      // --- 月度场景调用量 top5
      //   / main / monthCallTopFive
      // --- 月度场景近拦截率 top5
      //   / main / monthInterceptTopFive
      // --- 月度热门调用场景 top5
      //   / main / monthHotCallTopFive
      // --近一个月拦截报账金额 2.26 / 3.3 / 3.4 / 4.1
      //   / main / monthInterceptAmount
      // --上月总调用量，拦截数量，拦截率
      //   / main / monthInterceptTotal
      // ----环比
      //   / main / monthInterceptRatio
      // --- 近一个月拦截总金额
      //   / main / monthInterceptTotalAmount

      

       /**
       * 大写
       */
       async getMonthInterceptTotal() {
        try {
          const res = await this.$http({
            url: this.$http.adornBizUrl('/main/monthInterceptTotal'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })

          this.clickData[0].num = res.data.data[0].LJCS
          this.clickData[1].num = res.data.data[0].DYCS
          this.clickData[2].num = res.data.data[0].LJV
          // this.sumMoney = this.getMyMoney(res.data.data[0].ZJE)
        } catch (error) {
          console.log(error)
        }
      },


      /**
       * 小写
       */
      async getMonthInterceptRatio() {
        try {
          const res = await this.$http({
            url: this.$http.adornBizUrl('/main/monthInterceptRatio'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          // this.sumMoney = this.getMyMoney(res.data.data[0].ZJE)
          this.clickData[0].times = res.data.data[0].LJCS+" 次"
          if(res.data.data[0].LJCS > 0){
            this.clickData[0].type = 0
          }else{
            this.clickData[0].type = 1
          }
          this.clickData[1].times = res.data.data[0].DYCS+" 次"

          if(res.data.data[0].DYCS > 0){
            this.clickData[1].type = 0
          }else{
            this.clickData[1].type = 1
          }
          this.clickData[2].times = res.data.data[0].LJV+" %"

          if(res.data.data[0].LJV > 0){
            this.clickData[2].type = 0
          }else{
            this.clickData[2].type = 1
          }
          console.log("---------------------------------------A",this.clickData);
        } catch (error) {
          console.log(error)
        }
      },


      // 近一个月拦截总金额
      async getMouthLanjieMoney() {
        try {
          const res = await this.$http({
            url: this.$http.adornBizUrl('/main/monthInterceptTotalAmount'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          this.sumMoney = this.getMyMoney(res.data.data[0].ZJE)
        } catch (error) {
          console.log(error)
        }
      },
      // 近一个月拦截报账金额
      async getLanjieMoney() {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/main/monthInterceptAmount'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          const obj = {}
          console.log('---------------近一个月拦截报账金额AAAAAAA------------------', r.data.data)
          r.data.data.forEach(e => {
            if(e.DYCS == ''|| e.DYCS == null || e.DYCS == 'null'){
              e.DYCS = 0;
            }
            console.log(e.SCENE+"====A==="+this.getMyMoney(e.DYCS))
            obj[e.SCENE] = this.getMyMoney(e.DYCS)
          });
          debugger;
          this.interceptListData = obj
          console.log('---------------近一个月拦截报账金额AAAAAAA------------------', r.data.data)
        } catch (error) {
          console.log(error)
        }

      },
      // 半年内调用总量、拦截率
      async getHalfyearClickAndIntercept() {
        try {
          const res = await this.$http({
            url: this.$http.adornBizUrl('/main/haveAYear'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          const diaoyongData = []
          const diaoyongRQ = []
          const lanjieCS = []
          const lanjieLV = []
          const diaoyongsubRQ = []
          let currentRQ
          res.data.data.forEach(item => {
            const riqi = item.DYRQ.slice(0, 4) + '-' + item.DYRQ.slice(4, 6) + '-' + item.DYRQ.slice(6, 8)
            diaoyongData.push(item.DYCS)
            diaoyongRQ.push(riqi)
            lanjieCS.push(item.LJCS);
            lanjieLV.push(item.LJV);
          })
          this.diaoyongECoption.series[0].data = diaoyongData
          this.diaoyongECoption.xAxis.data = diaoyongRQ

          this.jiaoyanECoption.series[0].data = lanjieCS
          this.jiaoyanECoption.series[1].data = lanjieLV
          this.jiaoyanECoption.xAxis.data = diaoyongRQ

          

          this.showDiaoyong()
          this.showJiaoyan()

          console.log('---------------半年内调用总量、拦截率------------------', res.data.data)
        } catch (error) {
          console.log(error)
        }

      },
      // 月度场景调用量 top5
      async getDiaoyongTop5() {
        try {
          const res = await this.$http({
            url: this.$http.adornBizUrl('/main/monthCallTopFive'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          // this.DiaoyongTop5 = res.data.data
        // noDataList: [
          this.noDataList[1].child = res.data.data;
          // res.data.data.forEach(item => {
            
          // })
          // console.log('--------------月度场景调用量 top5--------------', res.data.data)
        } catch (error) {
          console.log(error)
        }
      },
      // 月度场景近拦截率 top5
      async getLanjeTop5() {
        try {
          const res = await this.$http({
            url: this.$http.adornBizUrl('/main/monthInterceptTopFive'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          this.noDataList[2].child = res.data.data;
          // console.log('--------------月度场景近拦截率 top5--------------', res.data.data)
        } catch (error) {
          console.log(error)
        }
      },
      // 月度热门调用场景 top5
      async gethotDiaoyongTop5() {
        // debugger;
        try {
          const res = await this.$http({
            url: this.$http.adornBizUrl('/main/monthHotCallTopFive'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          this.noDataList[0].child = res.data.data;
          console.log('--------------月度热门调用系统 top5--------------', res.data.data)
        } catch (error) {
          // alert();
          console.log(error)
        }
      },
      // 上月总调用量，拦截数量，拦截率
      async getlastMouth() {
        try {
          const res = await this.$http({
            url: this.$http.adornBizUrl('/main/monthInterceptTotal'),
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          console.log('--------------上月总调用量，拦截数量，拦截率--------------', res.data.data)
        } catch (error) {

          console.log(error)
        }
      },
      // 上月总调用量，拦截数量，拦截率
      // async gethotDiaoyongTop5() {
      //   try {
      //     const res = await this.$http({
      //       url: this.$http.adornBizUrl('/main/monthHotCallTopFive'),
      //       method: 'post',
      //       headers: {
      //         'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
      //       }
      //     })
      //     // console.log('--------------月度热门调用场景 top5--------------', res.data.data)
      //   } catch (error) {
         
      //     console.log(error)
      //   }
      // },


      // 页面跳转
      async gonextPage(newroute) {
        this.$message('路由跳转')
      },
      // 数字处理---->1000转化为1，000
      getMyMoney(money) {
        const str = money.toString()
        var reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
        console.log('pppppp', money, str.replace(reg, "$1,"))
        return str.replace(reg, "$1,")
        // var reg = money.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
        // return money.replace(reg,"$1,");
      }
    }
  }
</script>
<style lang="less" scoped>
  /* 公共样式 */
  /* 主题色 */
  .mainColor {
    color: #EB4B4B;
  }

  .blackColor {
    color: #333333;
  }

  /* 注释小灰字 */
  .subtxt {
    color: #737373;
    font-size: 12px;
    /* line-height: 24px; */
  }

  .subtxt:hover {
    // color: #EB4B4B;
    // cursor: pointer;
  }
  .subtxt_red {
    color: #EB4B4B;
    font-size: 18px;
    font-weight: 700;
  }

  /* 标题盒子---纵向排列居中 */
  .titleBox {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* 标题字体 */
  .title {
    text-align: center;
    color: #333333;
    font-size: 27px;
    font-weight: 700;
  }

  /* 标题下划线 */
  .hd_line {
    margin-top: 12px;
    width: 922px;
    height: 7.5px;
  }

  /* 金额统计盒子---横向排列居中 */
  .moneyBox {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    /* background-color: #F5F5F5; */
    /* background: #000; */

  }

  .card_body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */

  }

  /* ---------------------------------- */
  /* 有效区域 1080px 设计图有效区域1440px  正确尺寸：x /1.3333 */
  .I_main {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    min-width: 1080px;
    position: relative;
  }

  .maoposition {
    position: fixed;
    top: 80px;
    right: 50px;
    z-index: 1000;
  }

  .mao_item {
    width: 90px;
    height: 45px;
    line-height: 45px;
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    color: #737373;
    font-size: 12px;
    text-decoration: none;
  }

  .mao_item:hover {
    background-color: #EB4B4B;
    color: #FFFFFF;
    font-weight: 700;
  }

  .mao_item2 {
    width: 90px;
    height: 45px;
    line-height: 45px;
    display: flex;
    justify-content: center;
    text-align: center;
    background-color: #fff;
    font-size: 12px;
    text-decoration: none;
    background-color: #EB4B4B;
    color: #FFFFFF;
    font-weight: 700;
  }

  .sysnatic {
    /* height: 135px; */
    width: 100%;
    /* min-width: 1080px; */
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    align-items: center;

  }

  .sysnatic_c {
    margin-top: 18px;
    align-items: center;
    height: 135px;
    width: 1080px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .other_c {
    margin-top: 33px;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .s_item {
    width: 25%;
    height: 135px;
    position: relative;
  }

  .s_item2 {
    flex: 1;
    /* width: 33.33%; */
    height: 135px;
    position: relative;
  }

  .s_item_icon {
    position: absolute;
    top: 0;
    right: 10px;
    width: 18px;
    height: 18px;
  }

  .s_item_c {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .c_line {
    width: 1px;
    height: 100%;
    background-color: #EBEBEB;
  }

  .s_item_img {
    width: 39px;
    height: 39px;
    background-size: cover;
  }

  .s_item_img0 {
    background-image: url(../../../assets/img/kfpt.png);
  }

  .s_item_img0:hover {
    background-image: url(../../../assets/img/kfpt_p.png);
  }

  .s_item_img1 {
    background-image: url(../../../assets/img/cxmh.png);
  }

  .s_item_img1:hover {
    background-image: url(../../../assets/img/cxmh_p.png);
  }

  .s_item_img2 {
    background-image: url(../../../assets/img/rzcx.png);
  }

  .s_item_img2:hover {
    background-image: url(../../../assets/img/rzcx_p.png);
  }

  .s_item_text {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }

  .s_line1 {
    /* line-height: 36px; */
    margin-top: 16.5px;
    display: flex;
    justify-content: center;
    /* align-items: flex-start; */
  }

  .s_line2 {
    margin-top: 15px;
    line-height: 20px;
  }

  .s_num {
    font-size: 27px;
    margin-right: 5px;
    color: #333333;
    /* margin-top: -5px; */
  }



  .title1 {
    margin-top: 51px;
  }

  .mo_bg {
    box-sizing: border-box;
    padding-bottom: 10px;
    background: url('../../../assets/img/zje-bg.png');
    background-size: 1080px 73.5px;
    height: 73.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 17px;
  }

  .mon_four_box {
    margin-top: 6px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    width: 1080px;
  }

  .mon_four_box:hover{
    // cursor: pointer;
  }

  .mon_item {
    box-sizing: border-box;
    // width: 247.5px;
    width: 344.5px;
    height: 240px;
    border-bottom: 4.5px solid #EB4B4B;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

  }

  .mon_item2 {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
  }

  .mon_longitem {
    box-sizing: border-box;
    // width: 705px;
    height: 240px;
    border-bottom: 4.5px solid #EB4B4B;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .s_monitem_icon {
    position: absolute;
    top: 18px;
    right: 21px;
    width: 18px;
    height: 18px;
  }

  .mon_item_img {
    width: 64.5px;
    height: 57px;
    background-size: cover;
  }

  .mon_item_img_src0 {
    background-image: url(../../../assets/img/l1-zl.png)
  }

  .mon_item_img_src0:hover {
    background-image: url(../../../assets/img/l1-zl_p.png);
    cursor: pointer;
  }

  .mon_item_img_src10 {
    background-image: url(../../../assets/img/l2-ys.png)
  }

  .mon_item_img_src10:hover {
    background-image: url(../../../assets/img/l2-ys_p.png);
  }

  .mon_item_img_src11 {
    background-image: url(../../../assets/img/l2-zf.png)
  }

  .mon_item_img_src11:hover {
    background-image: url(../../../assets/img/l2-zf_p.png);
  }

  .mon_item_img_src2 {
    background-image: url(../../../assets/img/l3-zz.png)
  }

  .mon_item_img_src2:hover {
    background-image: url(../../../assets/img/l3-zz_p.png);
    cursor: pointer;
  }

  /* .mon_item_img  :hover{

  } */

  .num_dark {
    font-size: 27px;
    font-weight: 700;
    margin-right: 6px;
  }

  .num_dark2 {
    margin-right: 6px;
    position: absolute;
    top: 0;
    left: 15px;
  }

  .num_dark3 {
    font-size: 18px;
    font-weight: 700;
    margin-right: 6px;
  }

  .num_dark3_num {
    color: #EB4B4B;
    font-size: 27px;
    font-weight: 700;
  }

  .clickBox {
    height: 270px;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #F5F5F5;
    align-items: center;
  }

  .clickboxCon {
    width: 1080px;
    display: flex;
    justify-content: space-between;
    height: 150px;
  }

  .clickBox_item {
    height: 150px;
    width: 345px;
    display: flex;
    align-items: center;
    padding-left: 30px;
  }

  .clickBox_item_imgbox {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background-color: #EDEDED;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .click_img {
    width: 39px;
    height: 39px;
  }

  .clickBox_txtbox {
    margin-left: 19px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .click_num {
    font-size: 27px;
    font-weight: 700;
    margin: 8px 0;
  }

  .jtBox {
    display: flex;
    align-items: center;
  }

  .click_jt {
    width: 11.25px;
    height: 12.75px;
  }

  .L_title {
    display: flex;
    height: 30px;
    align-items: center;
  }

  .L_title_sq {
    width: 4.5px;
    height: 18px;
    background-color: #EB4B4B;
  }

  .L_title_txt {
    margin-left: 6px;
    font-size: 18px;
    font-weight: 700;
    color: #333333;
  }

  .nox_box {
    /* height: 420px; */
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
  }

  .no_item {
    height: 420px;
    width: 345px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: yellow; */
  }

  .no_item_tbox {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 80px;
    // 
    
  }
  .no_item_bkcolor0{
    background-color: #EB4B4B;
  }
  .no_item_bkcolor1{
    background-color: #4FE1AA;
}
.no_item_bkcolor2{
  background-color: #5BB5E0;
}
  .no_item_t {
    font-size: 18px;
    color: #FFFFFF;
    font-weight: 700;

  }

  .s_noitem_icon {
    position: absolute;
    width: 18px;
    height: 18px;
    top: 15px;
    right: 15px;
  }

  .no_item_cbox {
    width: 100%;
    flex: 1;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .no_item_timebox {
    display: flex;
    flex-direction: row;
    text-align: center;
    height: 35px;
    align-items: center;
    justify-content: space-between;
  }

  .no_item_index {
    color: #E5E5E5;
    font-size: 27px;
    font-weight: 700;
    font-style: italic;
  }

  .no_item_databox {
    width: 292px;
    margin-left: 4.5px;
  }

  .no_item_data {
    display: flex;
    justify-content: space-between;
  }

  .no_item_data_t {
    color: #333333;
    font-size: 14px;
    font-weight: 700;
  }

  .no_item_jindutiao {
    width: 100%;
    height: 9px;
    background-color: #E6E6E6;
    border-radius: 4.5px;
    margin-top: 12px;
    overflow: hidden;
  }

  .no_item_jdtcor0 {
    // width: 60%;
    height: 100%;
    background-image: linear-gradient(to right, #FDD7A0, #EB4B4B);
  }

  .no_item_jdtcor1 {
    // width: 60%;
    height: 100%;
    background-image: linear-gradient(to right, #D1FCC4, #5DE3B0);
  }

  .no_item_jdtcor2 {
    // width: 60%;
    height: 100%;
    background-image: linear-gradient(to right, #C3FCFB, #5BB5E0);
  }

  .hjt {
    width: 14px;
    height: 7px;
  }

  .ditu {
    margin-top: 20px;
    height: 410px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(../../../assets/img/dt-bg.png);
    background-repeat: repeat-x;
    background-size: cover;
    background-image: center center;
  }

  .other {
    height: 330px;
    width: 1080px;
  }

  .foot {
    height: 180px;
    width: 100%;
    font-size: 15px;
    color: #FFFFFF;
    background-color: #878787;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 46px;
  }

  .mon_bigbox {
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: 0 10px;
  }

  .mon_bigbox:hover{
    // cursor: pointer;
  }
  .shoua{

  }
  .shoua:hover{
    cursor: pointer;
  }
  .image-text_12 {
  width: 151px;
  height: 120px;
  margin: 32px 0 0 89px;

}

.text_12 {
  border: 1px solid rgba(235, 75, 75, 1);
  margin-left: 10px;
  border-radius: 3px;
  width: 94px;
  height: 20px;
  color: #EB4B4B;
  padding-right: 4px;
  padding-right: 4px;
}
.text_12:hover{
  cursor: pointer;
  background-color: rgba(245, 245, 245, 1);

}
.section_3 {
  background-color: rgba(245, 245, 245, 1);
  border-radius: 3px;
  width: 94px;
  height: 20px;
  border: 1px solid rgba(235, 75, 75, 1);
  // margin-left: 50px;
  font-size: 8px;
}
.image_37{
  width: 14px;
}
</style>